<template>
	<div class="system-menu-container">
		<el-dialog :title="ruleForm.type !== 2?'编辑菜单':'编辑按钮'"  destroy-on-close :close-on-click-modal="false" :close-on-press-escape="false" v-model="isShowDialog" width="769px">
			<el-form :model="ruleForm" size="small" label-width="80px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item v-if="ruleForm.type !== 2" label="菜单名称">
							<el-input v-model="ruleForm.menu_name" placeholder="请输入菜单名称" clearable></el-input>
						</el-form-item>
						<el-form-item v-else label="按钮名称">
							<el-input v-model="ruleForm.menu_name" placeholder="请输入按钮名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="权限标识">
							<el-input disabled v-model="ruleForm.permission" placeholder="请输入权限标识（多个请用逗号隔开）" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col v-if="ruleForm.type !== 2" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="路由名称">
							<el-input disabled v-model="ruleForm.route_path" placeholder="请输入路由名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col v-if="ruleForm.type === 1" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="组件地址">
							<el-input disabled v-model="ruleForm.assembly_path" placeholder clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col v-if="ruleForm.type !== 2" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="菜单图标">
							<IconSelector placeholder="请输入菜单图标" v-model="ruleForm.icon" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="small">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="small">提 交</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { onMounted, reactive, ref, toRefs, watch,defineComponent } from 'vue';
import IconSelector from '/@/components/iconSelector/index.vue';
// import { setBackEndControlRefreshRoutes } from "/@/router/backEnd";
import { edit } from "/@/api/menu/index"
import { setBackEndControlRefreshRoutes } from '/@/router/backEnd';
import { ElMessageBox } from 'element-plus';
export default defineComponent({
	name: 'EditMenu',
	components: { IconSelector },
	props: {
		treeList: {
			type: Array,
			default: []
		}
	},
	setup(props: any, context: any) {
		const res = ref(props);
		const treeMenu = new Proxy(res, {
			get: (target, key) => {
				return target[key]
			}
		})
		const state = reactive({
			isShowDialog: false,
			ruleForm: {
				id: 0,
				type: 0,
				parent_id: 0,
				route_path: '', // 路由名称
				assembly_path: '', // 组件地址
				sort: 0, // 菜单排序
				menu_name: '', // 菜单名称
				icon: '', // 菜单图标
				permission: '', // 权限标识（多个请用逗号隔开），最后转成数组格式
			},
		});
		// 打开弹窗
		const openDialog = (row: any) => {
			state.ruleForm.id = row.ID;
			state.ruleForm.type = row.Type;
			state.ruleForm.route_path = row.RoutePath;
			state.ruleForm.assembly_path = row.AssemblyPath;
			state.ruleForm.menu_name = row.MenuName;
			state.ruleForm.icon = row.Icon;
			state.ruleForm.permission = row.Permission;
			state.isShowDialog = true;
		};
		// 关闭弹窗
		const closeDialog = (row?: object) => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
			initForm();
		};
		const onSubmit = () => {
			edit({
				id: state.ruleForm.id,
				menu_name: state.ruleForm.menu_name,
				icon: state.ruleForm.icon
			}).then((res) => {
				ElMessageBox.alert(res.msg, '提示', {}).then(() => {
					// 刷新父级数据
					context.emit("sendRefresh");
					closeDialog(); // 关闭弹窗
					initForm();
					setBackEndControlRefreshRoutes() // 刷新菜单
				}).catch(() => { });
			})
		};
		// 表单初始化，方法：`resetFields()` 无法使用
		const initForm = () => {
			state.ruleForm.route_path = '';
			state.ruleForm.assembly_path = '';
			state.ruleForm.menu_name = '';
			state.ruleForm.icon = '';
			state.ruleForm.permission = '';
		};

		// 页面加载时
		onMounted(() => {

		});
		return {
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
			...toRefs(state),
			treeMenu
		};
	},
});
</script>
